<template>
  <div class="list">
    <div class="item">
      <div class="item-image">
        <img src="../../assets/img_box.png" alt="" />
      </div>
      <div class="item-info">
        <h2 class="info-title">这是一个很值得纪念的日子</h2>
        <div class="info-content">
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
        </div>
        <div class="info-show">
          <div class="date">2024-02-09 10:30:30</div>
          <div class="browse">
            <i class="el-icon-view"></i>
            6625人浏览
          </div>
          <div class="user">
            <el-avatar size="small" :src="circleUrl"></el-avatar>
            <span class="text">谭邦许</span>
          </div>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-image">
        <img src="../../assets/img_box.png" alt="" />
      </div>
      <div class="item-info">
        <h2 class="info-title">这是一个很值得纪念的日子</h2>
        <div class="info-content">
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
        </div>
        <div class="info-show">
          <div class="date">2024-02-09 10:30:30</div>
          <div class="browse">
            <i class="el-icon-view"></i>
            6625人浏览
          </div>
          <div class="user">
            <el-avatar size="small" :src="circleUrl"></el-avatar>
            <span class="text">谭邦许</span>
          </div>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-image">
        <img src="../../assets/img_box.png" alt="" />
      </div>
      <div class="item-info">
        <h2 class="info-title">这是一个很值得纪念的日子</h2>
        <div class="info-content">
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
        </div>
        <div class="info-show">
          <div class="date">2024-02-09 10:30:30</div>
          <div class="browse">
            <i class="el-icon-view"></i>
            6625人浏览
          </div>
          <div class="user">
            <el-avatar size="small" :src="circleUrl"></el-avatar>
            <span class="text">谭邦许</span>
          </div>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-image">
        <img src="../../assets/img_box.png" alt="" />
      </div>
      <div class="item-info">
        <h2 class="info-title">这是一个很值得纪念的日子</h2>
        <div class="info-content">
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
        </div>
        <div class="info-show">
          <div class="date">2024-02-09 10:30:30</div>
          <div class="browse">
            <i class="el-icon-view"></i>
            6625人浏览
          </div>
          <div class="user">
            <el-avatar size="small" :src="circleUrl"></el-avatar>
            <span class="text">谭邦许</span>
          </div>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="item-image">
        <img src="../../assets/img_box.png" alt="" />
      </div>
      <div class="item-info">
        <h2 class="info-title">这是一个很值得纪念的日子</h2>
        <div class="info-content">
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
          提到电子皮肤，大家可别以为是“电子游戏里的虚拟皮肤，提到电子皮肤
        </div>
        <div class="info-show">
          <div class="date">2024-02-09 10:30:30</div>
          <div class="browse">
            <i class="el-icon-view"></i>
            6625人浏览
          </div>
          <div class="user">
            <el-avatar size="small" :src="circleUrl"></el-avatar>
            <span class="text">谭邦许</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "articleList",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.list {

  .item {
    height: 180px;
    display: flex;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 10px;
    .item-image {
    }

    .item-info {
      margin: 30px 20px 30px 50px;

      .info-title {
        font-weight: 600;
        color: #3d3d3d;
        font-size: 16px;
      }

      .info-content {
        margin: 20px 0px;
        color: #666666;
        font-size: 14px;
        font-weight: 350;
        line-height: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .info-show {
        color: #999999;
        font-size: 14px;
        font-weight: 350;
        display: flex;
        align-items: center;
        .browse {
          margin-left: 30px;
        }
        .user {
          margin-left: 30px;

          .el-avatar {
            vertical-align: middle;
          }

          .text {
            margin-left: 8px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
